

<template>
  <PlusDialogForm
      ref="plusFormInstance"
      v-model:visible="dialogShow"
      v-model="formData"
      :form="{ columns,  labelWidth:'110px',  labelPosition:'right',  rules:formRules }"
      :dialog="{ title: dialogTitle, width: '540px', top: '12vh', confirmLoading }"
      @confirm="handleSubmit"
      @cancel="handleCancel"
  >

  </PlusDialogForm>
</template>


<script setup>
import { getClassApi, addClassApi, updateClassApi } from "@/api/edutation/class";
import { getCurrentInstance,ref } from "vue"
import {useCommonData} from "@/hooks/useCommonData.js";
const { proxy } = getCurrentInstance();
const { sys_data_status } = proxy.useDict('sys_data_status','sys_user_sex');

const {
  schoolDataList, getSchoolDataList,
  campusDataList,getCampusDataList,
  professionalDataListBySchoolId,getProfessionalDataListBySchoolId,
} = useCommonData();

getSchoolDataList()

const primaryKey = "classId"  // 主键
const emit = defineEmits(["update"]);

const dialogShow = ref(false);
const confirmLoading = ref(false)
const isEdit = computed(() =>!!formData.value[primaryKey])
const dialogTitle = computed(() => (isEdit.value ? '编辑' : '新增')+'班级')
const plusFormInstance = ref(null);
const formInstance = computed(()=>plusFormInstance.value?.formInstance)
const columns = computed(()=>[
{
  label: '班级名称',
  prop: 'className',
  valueType:'input',
  fieldProps:{
    maxlength: 200,
    modelModifiers: { trim: true },
  },
},{
  label: '入学时间',
  prop: 'entryDate',
  valueType:'date-picker',
  fieldProps:{
    type: 'date',
    format: 'YYYY-MM-DD',
    valueFormat: 'YYYY-MM-DD',
  },

},{
  label: '归属学校',
  prop: 'schoolId',
  valueType:'select',
  options:schoolDataList.value,
  optionsMap:{
    label:'schoolName',
    value:'schoolId',
  },
    fieldProps: {
      onChange: val=>{
        formData.value.proId = ''
        formData.value.campusId = ''
        if(val){
          getCampusDataList({schoolId:val})
          getProfessionalDataListBySchoolId(val)
        }else{
          campusDataList.value = [];
          professionalDataListBySchoolId.value = []
        }
      }
    }
},{
  label: '归属校区',
  prop: 'campusId',
  valueType:'select',
  options:campusDataList.value,
  optionsMap:{
    label:'campusName',
    value:'campusId',
  },
},
{
    label: '关联专业',
    tooltip: '如没有想要的专业,请去专业下面关联校区',
    prop: 'proId',
    valueType:'select',
    options:professionalDataListBySchoolId.value,
    optionsMap:{
      label:'proName',
      value:'proId',
    },
  },
  {
  label: '班主任',
  prop: 'managerId',
  valueType:'input',
  fieldProps:{
    maxlength: 200,
    modelModifiers: { trim: true, number:true },
  },
},
  {
    label: '状态',
    prop: 'status',
    valueType:'radio',
    options: sys_data_status.value,
  },{
    label: '备注',
    prop: 'remark',
    valueType:'textarea',
    fieldProps:{
      maxlength: 200,
      modelModifiers: { trim: true },
    },

  }
])
const formData = ref({
  status: "0",
  remark: "",
  className: "",
  entryDate: "",
  schoolId: "",
  campusId: "",
  managerId: "",
  proId: ""
});
const formRules = ref({
  status: "0",
  remark: "",
  className:[
      { required: true, message: "请输入班级名称", trigger: "blur" },
  ],
  entryDate: [
    { required: true, message: "请选择入学时间", trigger: "change" },
  ],
  schoolId: [
    { required: true, message: "请选择学校", trigger: "change" },
  ],
  campusId: [
    { required: true, message: "请选择校区", trigger: "change" },
  ],
  managerId: "",
  proId:[
    { required: true, message: "请选择专业", trigger: "change" },
  ],
});

// 确定按钮操作
const handleSubmit = async () => {
  try {
    confirmLoading.value = true
    if (isEdit.value) {
      await updateClassApi(formData.value)
      proxy.$modal.msgSuccess("修改成功")
    } else {
      await addClassApi(formData.value)
      proxy.$modal.msgSuccess("新增成功")
    }
    handleCancel();
    emit('update')
  } catch (error) {
    console.warn('提交错误:', error)
  } finally {
    confirmLoading.value = false
  }
}

// 取消按钮操作
function handleCancel() {
  dialogShow.value = false
  onReset();
}

// 重置数据
const onReset = () => {
  formData.value = {
    status: "0",
    remark: "",
    className: "",
    entryDate: "",
    schoolId: "",
    campusId: "",
    managerId: "",
    proId: ""
  }
  formInstance.value.resetFields();
}
// 查询回显
const getDetail = (key) => {
  getClassApi(key).then(({data}) => {
    formData.value = data;
    getCampusDataList({schoolId:data.schoolId})
    getProfessionalDataListBySchoolId(data.schoolId)
  });
}
// 打开弹框
const openDialog = async (row) => {
  if(row && row[primaryKey]){
    await getDetail(row[primaryKey])
  }
  dialogShow.value = true;
};
defineExpose({ openDialog });
</script>


